<template>
  <view class="addressContainer pt10">
    <AtForm>
      <view class="myrow">
        <view class="at-row ">
          <view class="adname">上门地址</view>
          <view class="c999 at-col at-col-7 ellipsis-1">{{formState.address}}</view>
          <view class="at-col at-col-2"><AtTag type='primary' size="small" :onClick="getAdress">获取地址</AtTag></view>
        </view>
      </view>
      
      <AtInput 
        name='addressDetail'
        title='详细地址' 
        type='text'
        placeholder='请输上门详细地址' 
        :value="formState.addressDetail"
        :onChange="(val)=>{handleChange(val,'addressDetail')}"
      />
      <AtInput
        name='name' 
        title='姓名' 
        type='text' 
        placeholder='请输入姓名' 
        :value="formState.name"
        :onChange="(val)=>{handleChange(val,'name')}"
      />
      <AtInput
        name='phone' 
        title='手机' 
        type='phone'
        placeholder='请输入手机' 
        :value="formState.phone"
        :onChange="(val)=>{handleChange(val,'phone')}"
      />
      <view class="mt30 pl20 pr20">
          <AtButton formType='submit' type="primary" :onClick="onSubmit">提交</AtButton>
      </view>
      <!-- <view class="mt20 pl20 pr20">
          <AtButton formType='reset' :onClick="onReset">重置</AtButton>
      </view> -->
    </AtForm>
  </view>
</template>

<script setup>
import Taro from "@tarojs/taro";
import { getCurrentInstance, reactive } from "vue";

import request from "../../utils/request";

const {ctx} = getCurrentInstance();
const formState = reactive({
  address:'获取地址',
  addressDetail:'',
  name:'',
  phone:''
})


const getAdress = ()=>{
  Taro.chooseLocation().then((res)=>{
    console.log(res);
    formState.address = res.address
  })
}

const handleChange = (val,field)=>{
  console.log(val,field);
  formState[field] = val
}

const onSubmit = async (event)=>{
  console.log(formState);
  let result = await request('/address/create','post',formState)
  console.log(result);
  setTimeout(() => {
      // Taro.navigateBack()
      Taro.reLaunch({
        url: '/pages/recycle/recycle'
      })
    }, 1500);
  if (result.code == 1) {
    ctx.$toast.success(result.msg)
  }
}
const onReset = (event) => {}

</script>

<style lang="scss">
.addressContainer{
  .at-form::after{
    border-top-width: 0px;
    border-bottom-width: 0px;
  }
  .myrow{
    height: 96px;
    line-height: 96px;
    border-bottom: 1px solid #d6e4ef;
    font-size: 32px;
    margin-left: 30px;
    .adname{
      width: 144px;
      margin-right: 16px;
    }
  }
  .at-input__title {
    width: 144px;
  }
}

</style>